<template>
    <view class="page">
        <view class="content_box">
            <!-- 玩法 -->
            <view class="playing_box" v-if="initList.length > 0" @click="wanfaBtn"></view>
            <view class="content_big_box">
                <view class="tading_box" v-if="initList.length > 0">
                    <image src="https://new.qingfentool.vip/upload/image/20230805/51e92c535733d4052fd82d4eda1017c5.png"
                        mode="scaleToFill" />
                    <view class="jingyanzhi_box">
                        <view class="jingyan_zhi_text">{{ experience }}</view>
                        <view class="jingyan_zhi_wenan">当前可用经验值</view>
                    </view>
                </view>
                <view class="dange_box" v-for="(item, index) in initList" :key="index">
                    <view class="dange_left_box">
                        <view class="dijiceng_box">第{{ item.index }}层</view>
                        <view class="pin_box">
                            <view class="pin_left_box" :class="'len_' + index">
                                <view class="stu1" v-if="item.status == 1"></view>
                                <image :src="item.prize_icon" mode="scaleToFill" />
                            </view>
                            <view class="pin_right_box" @click="jion(item)">参与</view>
                        </view>
                    </view>
                    <view class="dange_right_box">
                        <view class="jindutiao_box">
                            <view class="bentiao_box">
                                <view class="container">
                                    <view class="strip">
                                        <view class="blue" :style="'width:' + item.rate + '%'"></view>
                                    </view>
                                </view>
                            </view>
                            <view class="benNum_box">{{ item.experience }}/{{ item.pay_amount }}</view>
                        </view>
                        <view class="jiang_left_box">
                            
                            <view class="jiang_left_txt">
                                <view class="duty_box">过关条件</view>
                                <view class="running_box">
                                    <!-- {{ item.pay_amount }} -->
                                </view>
                                <view class="Nine_box">{{ item.prize_name }}</view>
                            </view>
                            <view class="jiang_right_box">
                                <view class="bonus_box">过关奖励</view>
                                <view class="jiangli_kuang">
                                    <view class="dangejiangli_box" v-for="(items, indexs) in item.prize_list" :key="indexs">
                                        <view class="jiangpin_pic_box">
                                            <image :src="items.prize_icon" mode="scaleToFill" />
                                        </view>
                                        <view class="baifenbi_box">{{ Math.ceil(items.probability) }}%</view>
                                    </view>
                                </view>
                                <view class="sanjiaoxing_box"></view>
                                <view class="suiji_box">随机掉落</view>
                            </view>

                        </view>
                    </view>
                </view>
                <view class="tadi_box" v-if="initList.length > 0">
                    <image src="https://new.qingfentool.vip/upload/image/20230728/a37c5a82e4d78763e047f52c50ca6b83.png"
                        mode="scaleToFill" />
                </view>
            </view>
        </view>
        <view style="height:135rpx;"></view>
        <zdy-tabbar :current-page="2"></zdy-tabbar>
    </view>
</template>
<script>
export default {
    data() {
        return {
            progress: 50,
            initList: [],
            experience: '',
        }
    },
    onShow() {
        this.init()
    },
    methods: {
        // 玩法
        wanfaBtn() {
            uni.navigateTo({
                url: '/userPage/user/agreement?id=' + 25
            });
        },
        jion(item) {
            uni.navigateTo({
                url: '/userPage/user/chronicles?ID=' + item.id
            })
        },
        init() {
            this.$Request.get(this.$api.mall.stairIndex).then(res => {
                this.experience = res.data.experience
                this.initList = res.data.data
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    min-height: 100vh;
    background-image: url('https://new.qingfentool.vip/upload/image/20230727/f84b987a3736c95c34eefa93ddf3c93e.png');
    background-size: 100% 100%;
    padding-top: 70rpx;
    overflow: hidden;

    .content_box {
        width: 100%;
        // height: 1480rpx;
        position: relative;

        .playing_box {
            z-index: 99999999;
            width: 116rpx;
            height: 50rpx;
            /* #ifdef APP-PLUS */
            background-image: url('https://new.qingfentool.vip/upload/image/20230727/fd656b392b0eb2708b5115ed764159fb.png');
            background-size: 100% 100%;
            right: 0;
            /* #endif */
            /* #ifdef MP-WEIXIN */
            background-image: url('https://new.qingfentool.vip/upload/image/20230727/2d33b316cdbf68de0e665f619ecc694e.png');
            background-size: 100% 100%;
            left: 0;
            /* #endif */
            position: absolute;
            top: 10rpx;
        }

        .content_big_box {
            width: 100%;

            .tading_box {
                width: 95%;
                height: 185rpx;
                position: relative;

                image {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                }

                .jingyanzhi_box {
                    position: absolute;
                    width: 46%;
                    height: 33%;
                    right: 0;
                    top: 37%;

                    .jingyan_zhi_text {
                        width: 96%;
                        height: 50%;
                        margin: auto;
                        text-align: center;
                        color: #FFB200;
                        font-size: 22rpx;
                    }

                    .jingyan_zhi_wenan {
                        width: 96%;
                        height: 50%;
                        margin: auto;
                        text-align: center;
                        color: #CEB172;
                        font-size: 22rpx;
                    }
                }

            }

            .dange_box {
                width: 95%;
                height: 160rpx;
                // background-color: #fff;
                background-image: url('https://new.qingfentool.vip/upload/image/20230728/014e426e3905d644eea94f5df11f202b.png');
                background-size: 100% 100%;
                display: flex;
                justify-content: space-between;

                .dange_left_box {
                    width: 50%;
                    height: 100%;
                    padding-top: 4.5%;

                    .dijiceng_box {
                        width: 100%;
                        height: 30rpx;
                        line-height: 30rpx;
                        text-align: center;
                        color: #fff;
                        font-size: 17rpx;
                        padding-left: 4%;
                        margin-bottom: 6%;
                    }

                    .pin_box {
                        width: 35%;
                        height: 44%;
                        margin-left: 36%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;



                        .pin_left_box {
                            width: 42%;
                            height: 100%;
                            // background-color: pink;
                            border-radius: 3rpx;
                            position: relative;

                            .stu1 {
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                background: rgba(39, 34, 30, 0.5);
                            }

                            &.len_0 {
                                background: linear-gradient(0deg, #CFAD65 0%, #B2965B 98%);
                                border: 1px solid #33271D;
                            }

                            &.len_1,
                            &.len_2 {
                                background: linear-gradient(0deg, #E29377 0%, #B35A48 98%);
                                border: 1px solid #33261D;
                            }

                            &.len_3,
                            &.len_4 {
                                background: linear-gradient(0deg, #BFAED9 1%, #8C86AD 99%);
                                border: 1px solid #4D4F59;
                            }

                            &.len_5,
                            &.len_6 {
                                background: linear-gradient(0deg, #C5CB95 0%, #8FAC88 99%);
                                border: 1px solid #54594D;
                            }

                            &.len_7,
                            &.len_8 {
                                background: linear-gradient(0deg, #CADFFA 1%, #AAB5BD 99%);
                                border: 1px solid #4D4F59;
                            }

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        // .pin_left_box:nth-child(1) {
                        //     background: linear-gradient(0deg, #CFAD65 0%, #B2965B 98%);
                        //     border: 1px solid #33271D;

                        // }

                        // .pin_left_box:nth-child(2),
                        // .pin_left_box:nth-child(3) {
                        //     background: linear-gradient(0deg, #E29377 0%, #B35A48 98%);
                        //     border: 1px solid #33261D;

                        // }


                        .pin_right_box {
                            width: 54%;
                            height: 60%;
                            background: linear-gradient(0deg, #E9DFAB 0%, #FDECBF 100%);
                            border-radius: 16rpx;
                            border: 1px solid #C9A823;
                            font-size: 20rpx;
                            text-align: center;
                            line-height: 150%;
                            font-weight: 600;
                            color: #704522;
                        }

                        .pin_right_box1 {
                            width: 54%;
                            height: 60%;
                            // background: linear-gradient(0deg, #E9DFAB 0%, #FDECBF 100%);
                            background-color: #999;
                            border-radius: 16rpx;
                            border: 1px solid #C9A823;
                            font-size: 20rpx;
                            text-align: center;
                            line-height: 150%;
                            font-weight: 600;
                            color: #704522;
                        }
                    }
                }

                .dange_right_box {
                    width: 50%;
                    height: 100%;
                    padding-top: 14rpx;

                    .jindutiao_box {
                        width: 250rpx;
                        height: 14rpx;
                        // background-color: #333;
                        margin-left: 20%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 6rpx;

                        .bentiao_box {
                            width: 200rpx;
                            height: 100%;
                            border-radius: 4rpx;

                            .strip {
                                width: 100%;
                                height: 14rpx;
                                background: #b69d8f;
                                border-radius: 20upx;
                                overflow: hidden;
                            }

                            .blue {
                                height: 14rpx;
                                background-color: #962523;
                                opacity: 1;
                                border-radius: 20upx;
                                font-size: 28rpx;
                                line-height: 150%;
                                text-align: center;
                            }
                        }

                        .benNum_box {
                            width: 45rpx;
                            height: 100%;
                            line-height: 14rpx;
                            font-size: 15rpx;
                            font-family: Source Han Sans CN;
                            font-weight: bold;
                            color: #452213;
                            text-align: center;
                        }
                    }

                    .jiang_left_box {
                        width: 266rpx;
                        height: 80%;
                        margin-left: 17%;
                        display: flex;
                        justify-content: space-between;

                        .jiang_left_txt {
                            width: 100rpx;
                            height: 100%;

                            .duty_box {
                                width: 100%;
                                font-size: 17rpx;
                                line-height: 15rpx;
                                text-align: center;
                                color: #8D6C40;
                                margin-bottom: 16rpx;
                            }

                            .running_box {
                                width: 100%;
                                font-size: 16rpx;
                                font-family: Source Han Sans CN;
                                font-weight: bold;
                                color: #452213;
                                text-align: center;
                                margin-bottom: 25rpx;
                            }

                            .Nine_box {
                                width: 100%;
                                font-size: 18rpx;
                                font-family: Source Han Sans CN;
                                font-weight: bold;
                                color: #962523;
                                text-align: center;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                    }

                    .jiang_right_box {
                        width: 165rpx;
                        height: 100%;

                        .bonus_box {
                            width: 100%;
                            font-size: 17rpx;
                            line-height: 15rpx;
                            text-align: center;
                            color: #8D6C40;
                            margin-bottom: 5rpx;
                        }

                        .jiangli_kuang {
                            width: 100%;
                            height: 70rpx;
                            border-bottom: 4rpx solid #962523;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            .dangejiangli_box {
                                width: 32%;
                                height: 100%;
                                padding-top: 5rpx;

                                .jiangpin_pic_box {
                                    width: 40rpx;
                                    height: 40rpx;
                                    // background-color: #fff;
                                    // margin-bottom: 4rpx;
                                    margin: auto;

                                    image {
                                        width: 100%;
                                        height: 100%;
                                    }
                                }

                                .baifenbi_box {
                                    width: 100%;
                                    font-size: 21rpx;
                                    font-family: Source Han Sans CN;
                                    font-weight: bold;
                                    color: #962523;
                                    text-align: center;
                                }
                            }
                        }
                    }

                    .sanjiaoxing_box {
                        width: 0rpx;
                        height: 0rpx;
                        border: 6rpx solid #962523;
                        border-bottom-color: transparent;
                        border-left-color: transparent;
                        border-right-color: transparent;
                        margin: auto;
                    }

                    .suiji_box {
                        width: 100%;
                        font-size: 15rpx;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #452213;
                        text-align: center;
                    }
                }
            }

            .tadi_box {
                width: 95%;
                height: 50rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }




    }
}
</style>